<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05元素的样式/尺寸操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		css（）      功能：
		                1个参：传入css属性名
						功能：获取匹配元素集合中第一个元素的css属性值
						2个参：传入css属性名
						功能：设置匹配元素集合中第一个元素的css属性值
						n个参：传入css属性名
						语法糖：css（{"属性名"："属性值",
						             "属性名"："属性值",
									 ........
									 "属性名"："属性值"
									 }）
		wideth和height（）
		outWhideth（）和outHeighth（） 功能：匹配元素集合中第一个元素宽高度
		                              无参：获取匹配元素集合中第一个元素宽高度
									  有参：设置匹配元素集合中第一个元素宽高度
									  width（数值）
		outWidth()和outerHeight（）
		 -->
		 <style>
			 .box{
				background-color: aqua; 
				padding: 20px;
				margin: 20px;
				border: 5px solid red;
			 }
			 .result{
				 margin-top: 10px;
				 font-weight: 700;
				 
			 }
		 </style>
		 <script src="../../MI/js/js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 创建两个div平行，6个按钮 -->
		<!-- css: .box添加样式：背景颜色、内外边距：20px 边框：5px
		          .result添加样式：上外边距：10px，字体加粗
			引入jq框架
			   -->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn">获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度（内边距+边框）</button>
		<button id="Btn">6</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/*1.点击 获取颜色属性值 Annie 获取颜色值并打印在页面上*/
			$("#getColorbtn").click(function(){
				//获取css属性值方式：传入属性名即可
				var bgCloor= $(".box").css("background-color");
				//页面上打印属性值 获取的属性值是rgb(170, 255, 255)
				$("#result").text("获取的属性值是"+bgCloor)
			});
			/*2.*/
			$("#setColorbtn").click(function(){
			/*3.点击 设置多属性效果 按钮 圆，背景色，阴影*/
			$("#setBtn").click(function(){
			$(".box").css({"background-image":"url(../img/123.png)",
					               "border":"5px solid #ff0",
								   "widyh":"300px",
								   "height":"300px",
								   "background-size":"100% 100%",
								   "border-radius":"50%",
								   "box-shadow":"5px 5px 10px #ff0",
					});
			/*4.*/
				$("#gsBtn").click(function(){
					var w=$(".box").width();
					$("#result").text("获取宽度是："+w+"px");
				})
				//改成橙色
				$(".box").css("background-color","orange");
				$("#result").text("改变后颜色为：橙色");
			});
		</script>
	</body>
</html>